<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <title>ipfs-http-client</title>
</head>

<body style="display: flex;align-items: center;justify-content: center;height:100vh">

<section>
    <a href="ipfs.html"><h1>返回</h1></a>
    <h1>ipfs-http-client JS 测试</h1>
    <div class="connect-box">
        <h2>填写你的服务器链接</h2>
        <input type="text" class="connect" value="/ip4/127.0.0.1/tcp/5001">
        <button class="connect-btn">连接ipfs</button>
    </div>

    <div class="ipfs-info" style="display: none">
        <h2 class="status"></h2>
        <h4 class="id"> </h4>
        <h4 class="agentVersion"></h4>
        <br>
    </div>

    <div class="add-box" style="display: none;">
        <h2>上传文件</h2>
        <input type="file" class="add"><br>
        <a class="hash-link" href=""></a>
    </div>
</section>

<!-- 引入ipfs-http-client依赖 -->
<script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    //DOM
    let connectDOM = document.getElementsByClassName('connect-box')[0];
    let inputConnectDOM = document.getElementsByClassName('connect')[0];
    let btnConnectDOM = document.getElementsByClassName('connect-btn')[0];
    let addDOM = document.getElementsByClassName('add-box')[0];
    let inputAddDOM = document.getElementsByClassName('add')[0];
    let hashLinkDOM = document.getElementsByClassName('hash-link')[0];
    let ipfsInfoDOM = document.getElementsByClassName('ipfs-info')[0];
    let statusDOM = document.getElementsByClassName('status')[0];
    let idDOM = document.getElementsByClassName('id')[0];
    let agentVersionDOM = document.getElementsByClassName('agentVersion')[0];


    let ipfs = null;

    // 连接ipfs
    btnConnectDOM.onclick = () => {
        /*
         *inputConnectDOM.value 为ipfs连接的服务器网址
         * 可以为字符串如：/ip4/ip地址/tcp/端口号
         * 也可以为对象如：
         * {
         * 	host:'192.168.33.11',//ip地址
         * 	port:'5001',//端口号
         * 	protocol: 'http', //协议名
         *  	apiPath: '/ipfs/api/v0' //路径，默认为此，也可为设为其他
         * }
         */
        ipfs = window.IpfsHttpClient.create(inputConnectDOM.value);
        console.log(ipfs)

        // 连接成功之后显示可操作内容
        getIpfsNodeInfo();
        addDOM.style.display = 'block';
        connectDOM.style.display = 'none';
    }


    // 获取节点信息
    async function getIpfsNodeInfo() {
        try {
            const {
                agentVersion,
                id
            } = await ipfs.id();
            statusDOM.innerHTML = '已经连接到 IPFS';
            idDOM.innerHTML = 'ID: ' + id;
            agentVersionDOM.innerHTML = 'Agent version: ' + agentVersion;
        } catch (err) {
            // Set error status text.
            statusDOM.innerHTML = `报错: ${err}`;
        }
        ipfsInfoDOM.style.display = 'block';
    }

    // 上传文件操作
    inputAddDOM.onchange = (event) => {
        // 获得上传的文件
        let file = event.target.files[0];
        let name = file.name

        // 执行上传函数
        saveToIpfs(file).then(hashCode => {
            /*
             * 上传后的文件链接地址可以为
             * https://ipfs.io/ipfs/+hashCode
             * 也可以为你的服务器的上传地址
             */
            // var httpRequest = new XMLHttpRequest();
            // httpRequest.open("POST","http://localhost/java_ipfs_war_exploded/add",true);
            // httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // var data = {hashcode:hashCode}
            // httpRequest.send(JSON.stringify(data));
            // httpRequest.onreadystatechange = ()=>{
            //     if(httpRequest.readyState == 4 && httpRequest.status == 200){
            //         var data = JSON.parse(httpRequest.responseText);
            //         console.log(data);
            //     }
            // }

            axios({
                method:"post",
                url:"http://localhost/java_ipfs_war_exploded/Add",
                data:{hashCode, name}
            }).then(function (resp){
                alert(resp.data)
            })
            hashLinkDOM.href = "http://127.0.0.1:8080/ipfs/" + hashCode;
            hashLinkDOM.innerHTML = "http://127.0.0.1:8080/ipfs/" + hashCode;
        })
    }

    // 上传文件到ipfs的方法
    async function saveToIpfs(file) {
        try {
            const added = await ipfs.add(file, {
                progress: (prog) => console.log(`received: ${prog}`),
            });

            // 获取上传文件hash值
            let added_file_hash = added.cid.toString();

            // 返回hash值
            return Promise.resolve(added_file_hash)

        } catch (err) {
            console.error(err);
        }
    }
</script>
</body>

</html>